// 渲染智能手机
// ?pageNum=1&pageSize=12&t=1634126671408

const xhr = new XMLHttpRequest()
xhr.open('GET','/vivophones?pageNum=1&pageSize=12&t=1634126671408')
xhr.onload= function(){
  const ul = document.querySelectorAll('.spu-item-list')
  // console.log(ul);
  // console.log(JSON.parse(xhr.responseText));
  const res = JSON.parse(xhr.responseText).data.dataList
  // console.log(res);
  let str = ''
  for(let k = 0;k < res.length; k++){
    str += `
    <li class="spu-item">
            <a>
              <div class="figure">
                <img src="${res[k].images[0].hdPic}" alt="">
              </div>
              <div class="spu-info">
                <p class="name">${res[k].skuName}</p>
                <p class="info-feature">
                  <span class="sale-point">【${res[k].promotin}】</span>
                  
                ${res[k].brief}
              
                </p>
                <p class="price rmb-symbol">
                  ¥${res[k].salePrice}.00
                </p>
              </div>
            </a>
          </li>
    `
  }
  ul[0].innerHTML = str




  const li = document.querySelectorAll('.spu-item-list .spu-item')
  // console.log(li);
  for(let k=0;k<li.length;k++){
    li[k].addEventListener('click',(e)=>{
      try{e.preventDefault} catch(err) {e.returnValue = false}
     
        console.log('11');
        window.localStorage.setItem('img',res[k].images[0].hdPic)
        window.localStorage.setItem('name',res[k].skuName)
        window.localStorage.setItem('salepoint',res[k].promotin)
        window.localStorage.setItem('miaoshu',res[k].brief)
        window.localStorage.setItem('price',res[k].salePrice)
        window.location.href = "./detail.html"
      
    })
  
  }






}
xhr.send()



// 渲染配件产品
// ?pageNum=1&pageSize=12&t=1634129982760

const xhr1 = new XMLHttpRequest()
xhr1.open('GET','/vivopeijian?pageNum=1&pageSize=12&t=1634129982760')
xhr1.onload = function(){
  const ul = document.querySelectorAll('.spu-item-list')
  // console.log(ul);
  // console.log(JSON.parse(xhr1.responseText));
  const res = JSON.parse(xhr1.responseText).data.dataList
  // console.log(res);
  let str1 = ''
  for(i = 0;i < res.length;i++){
    str1 +=`
        <li class="spu-item">
            <a>
              <div class="figure">
                <img src="${res[i].images[0].hdPic}" alt="">
              </div>
              <div class="spu-info">
                <p class="name">${res[i].skuName}</p>
                <p class="info-feature">
                  <span class="sale-point">【${res[i].promotin}】</span>
                  
                ${res[i].brief}
              
                </p>
                <p class="price rmb-symbol">
                  ¥${res[i].salePrice}.00
                </p>
              </div>
            </a>
          </li>
    `
  }
  ul[1].innerHTML = str1
}

xhr1.send()


// 渲染服务
// ?pageNum=1&pageSize=12&t=1634130083424

const xhr2 = new XMLHttpRequest()
xhr2.open('GET','/vivofuwu?pageNum=1&pageSize=12&t=1634130083424')
xhr2.onload = function(){
  const ul = document.querySelectorAll('.spu-item-list')
  // console.log(ul);
  // console.log(JSON.parse(xhr1.responseText));
  const res = JSON.parse(xhr2.responseText).data.dataList
  // console.log(res);
  let str2 = ''
  for(i = 0;i < res.length;i++){
    str2 +=`
        <li class="spu-item">
            <a>
              <div class="figure">
                <img src="${res[i].images[0].hdPic}" alt="">
              </div>
              <div class="spu-info">
                <p class="name">${res[i].skuName}</p>
                <p class="info-feature">
                  <span class="sale-point">【${res[i].promotin}】</span>
                  
                ${res[i].brief}
              
                </p>
                <p class="price rmb-symbol">
                  ¥${res[i].salePrice}.00
                </p>
              </div>
            </a>
          </li>
    `
  }
  ul[2].innerHTML = str2
}

xhr2.send()

// 点击切换渲染页面(智能手机,配件产品,服务)
const filterMenu = document.querySelectorAll('.filter-tab-menu')
const spuItemList = document.querySelectorAll('.spu-item-list')
// console.log(filterMenu);
// console.log(spuItemList);
// for(i = 0;i<filterMenu.length;i++){
//   filterMenu[i].addEventListener('click',function(){
//     spuItemList[i].style.display = "block"
//   })
// }
filterMenu[0].addEventListener('click',(e)=>{
  try { e.preventDefault() } catch (err) { e.returnValue = false }
  spuItemList[0].style.display = 'block'
  spuItemList[1].style.display = 'none'
  spuItemList[2].style.display = 'none'
})
filterMenu[1].addEventListener('click',(e)=>{
  try { e.preventDefault() } catch (err) { e.returnValue = false }
  spuItemList[0].style.display = 'none'
  spuItemList[1].style.display = 'block'
  spuItemList[2].style.display = 'none'
})
filterMenu[2].addEventListener('click',(e)=>{
  try { e.preventDefault() } catch (err) { e.returnValue = false }
  spuItemList[0].style.display = 'none'
  spuItemList[1].style.display = 'none'
  spuItemList[2].style.display = 'block'
})


const filterTab = document.querySelector('.filter-tab')

